<template>
  <div>
    <!-- 已登录 -->
    <div v-if="$store.state.token">
      <van-nav-bar title="购物车" fixed />
      <div class="topItem">
        <van-cell class="box" v-for="(item, index) in list" :key="item.id">
          <van-row type="flex" align="center">
            <van-col span="2">
              <!-- 复选 -->
              <van-checkbox
                ref="checkbox"
                @click="getChecked(index)"
                v-model="item.checked"
                checked-color="#ee0a24"
                icon-size="16px"
              ></van-checkbox>
            </van-col>
            <van-col span="5">
              <van-image width="80" height="80" :src="item.list_pic_url" />
            </van-col>
            <van-col span="10">
              <div class="content">{{ item.goods_name }}</div>
              <div class="price">￥{{ item.retail_price }}</div>
            </van-col>
            <van-col span="7">
              <van-row type="flex" justify="end">
                <span class="number" v-if="flag"
                  >已选择：{{ item.number }} 个</span
                >
                <!-- 进步器 -->
                <van-stepper
                  @plus="addNum(item)"
                  @minus="reduceNum(item)"
                  v-if="flag"
                  @change="numberChange(item)"
                  :default-value="item.number"
                  theme="round"
                  input-width="26px"
                  button-size="20px"
                />
                <span v-else>x{{ item.number }}</span>
              </van-row>
            </van-col>
          </van-row>
        </van-cell>
      </div>

      <van-cell class="box-bottom">
        <van-row type="flex" align="center" justify="space-between">
          <!-- 全选按钮 -->
          <van-checkbox
            @click="change"
            ref="checkedAll"
            v-model="isAll"
            style="padding-left: 16px"
            checked-color="#ee0a24"
            icon-size="16px"
          ></van-checkbox>
          <span>全选({{ allCount }})</span>
          <span class="price">￥{{ allPrice }}</span>
          <van-button @click="edit">{{ flag ? "完成" : "编辑" }}</van-button>
          <van-button @click="delNum" style="width: 90px" color="#e11c34">{{
            flag ? "删除所选" : "下单"
          }}</van-button>
        </van-row>
      </van-cell>
    </div>
    <!-- 暂无商品  -->
    <van-empty v-if="!list.length" description="购物车暂无商品">
      <van-button to="/classify" round type="danger" class="bottom-button"
        >快去挑选吧</van-button
      >
    </van-empty>
    <!-- 未登录 -->
    <!-- <van-empty v-else description="您还未登录">
      <van-button to="/login" round type="danger" class="bottom-button"
        >立即登录</van-button
      >
    </van-empty> -->
  </div>
</template>

<script>
import {
  getShoppingList,
  getChecked,
  editNum,
  delNum,
} from "@/api/gaoqing/shopping";
export default {
  name: "Shopping",
  data() {
    return {
      list: [],
      checkedAll: false,
      flag: false,
      productId: [],
      value: "",
    };
  },
  created() {
    this.initData();
  },
  computed: {
    // 总价
    allPrice() {
      // console.log(this.list.filter(item => item.checked === 1));
      return this.list
        .filter((item) => item.checked == 1)
        .reduce((sum, item) => {
          //  console.log(sum,item);
          return (sum += item.number * item.retail_price);
        }, 0);
    },
    // 总数
    allCount() {
      return this.list
        .filter((item) => item.checked == 1)
        .reduce((sum, item) => {
          return (sum += item.number);
        }, 0);
    },
    // 小选影响全选
    isAll: {
      get() {
        //取值
        //every方法，数组中每一项都满足一个条件返回true
        return this.list.every((item) => item.checked);
      },
      set(newValue) {
        //设置值
        console.log("触发set方法");
        this.list.map((item) => (item.checked = newValue));
      },
    },
  },
  methods: {
    async initData() {
      let { data } = await getShoppingList();
      console.log(data.data);
      this.list = data.data.cartList;
    },
    // 点击选中
    async getChecked(idx) {
      // console.log(this.list[idx].checked);
      if (this.list[idx].checked === false) {
        await getChecked({
          isChecked: 0,
          productIds: this.list[idx].product_id,
        });
      } else {
        await getChecked({
          isChecked: 1,
          productIds: this.list[idx].product_id,
        });
      }
    },
    // 全选
    change() {
      return this.list.forEach(async (item) => {
        item.checked = this.$refs.checkedAll.checked;
        console.log(item);
        if (item.checked === true) {
          await getChecked({
            isChecked: 1,
            productIds: item.product_id,
          });
        } else {
          await getChecked({
            isChecked: 0,
            productIds: item.product_id,
          });
        }
      });
    },
    // 修改编辑状态
    edit() {
      this.flag = !this.flag;
    },
    // 点击加
    async addNum(val) {
      // console.log(val);
      await editNum({
        goodsId: val.goods_id,
        id: val.id,
        productId: val.product_id,
        number: val.number++,
      });
    },
    // 点击减
    async reduceNum(val) {
      // console.log(val);
      await editNum({
        goodsId: val.goods_id,
        id: val.id,
        productId: val.product_id,
        number: val.number--,
      });
    },
    numberChange(item) {
      console.log(item);
      // await editNum({
      //     goodsId: val.goods_id,
      //     id: val.id,
      //     productId: val.product_id,
      //     number: val.number
      //   })
      // val.number = this.value
    },
    async delNum() {
      let { data } = await getShoppingList();
      // console.log(data.data.cartList);
      let arr = data.data.cartList.filter((item) => item.checked === 1);
      console.log(arr);
      if (arr.length === 0) {
        return this.$toast.fail("请选择商品");
      }
      arr.forEach(async (key) => {
        if (this.flag == true) {
          await delNum({ productIds: JSON.stringify(key.product_id) });
          this.initData();
        } else {
          this.$router.push("/checkout");
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.topItem {
  margin-bottom: 180px;
  margin-top: 80px;
}
.box {
  border-bottom: 1px solid #eee;
}
.content {
  width: 100%;
  // height: 100px;
  line-height: 1.5;
  padding-left: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.price {
  padding-left: 20px;
  font-size: 30px;
}
.number {
  font-size: 5.12px;
  color: #999;
}
.box-bottom {
  padding: 0;
  position: fixed;
  bottom: 100px;
  border-top: 1px solid #eee;
  /deep/.van-button {
    border: transparent;
  }
}
/deep/ .van-nav-bar__content {
  background-color: #e11c34;
}
/deep/ .van-nav-bar__title {
  color: #fff;
}
</style>
